{% extends "school/layout.html" %}

{% set page_title = translate('教室管理') %}

{% block css %}
<style type="text/css">
	.classroom{
		color: red;
	}
	.system{
		color: #545454;
	}
</style>
{% endblock %}

{% block content %}
<div class="m-classroom-list">
<div class="m-table-top">
	<div class="title">
		<div class="name">{{translate('钢琴教室管理')}}</div>
		<p class="text">{{translate('教室数量')}}  {{classrooms_piano|length}} {{translate('个')}}</p>
	</div>
</div>
<ul class="m-ul-table">
	<li class="header">
		<span class="cell">{{translate('教室名称')}}</span>
		<span class="cell">{{translate('教室容量')}}</span>
		<span class="cell time">{{translate('创建时间')}}</span>
		<span class="cell">{{translate('版本')}}</span>
		<span class="cell">{{translate('管理')}}</span>
	</li>
	{% for room in classrooms_piano %}
	<li id="{{ room.id }}">
		<span class="cell">
			<span class="text">{{ room.name }}</span>
			{% if current_user.is_admin %}
			<span class="glyphicon glyphicon-edit pull-right"></span>
			{% endif %}
		</span>
		<span class="cell">{{ room.capacity }}</span>
		<span class="cell time">{{ room.created_at }}</span>
		<span class="cell" class="{{ room.system_version.type }}">{{ room.system_version.value }}</span>
		<span class="cell"><a href="/school/classrooms/{{ room.id }}">{{translate('查看')}}</a></span>
	</li>
	{% endfor %}
</ul>
	<!-- <table class="table table-striped table-condensed table-bordered">
		<thead>
			<tr>
				<th>教室名称</th>
				<th>教室容量</th>
				<th>创建时间</th>
				<th>版本</th>
				<th>管理</th>
			</tr>
		</thead>
		<tbody>
			{% for room in classrooms %}
			<tr id="{{ room.id }}">
				<td>
					<span class="text">{{ room.name }}</span>
					{% if current_user.is_admin %}
					<span class="glyphicon glyphicon-edit pull-right"></span>
					{% endif %}
				</td>
				<td>{{ room.capacity }}</td>
				<td>{{ room.created_at }}</td>
				<td class="{{ room.system_version.type }}">{{ room.system_version.value }}</td>
				<td><a href="/school/classrooms/{{ room.id }}">查看</a></td>
			</tr>
			{% endfor %}
		</tbody>
	</table> -->
</div>	

{% if classrooms_uku %}
<div class="m-classroom-list">
	<div class="m-table-top">
		<div class="title">
			<div class="name">{{translate('尤克里里教室管理')}}</div>
			<p class="text">{{translate('教室数量')}}：{{classrooms_uku|length}} {{translate('个')}}</p>
		</div>
	</div>
	<ul class="m-ul-table">
		<li class="header">
			<span class="cell">{{translate('教室名称')}}</span>
			<span class="cell">{{translate('教室容量')}}</span>
			<span class="cell time">{{translate('创建时间')}}</span>
			<span class="cell" style="float: none; border-right: 1px solid #e8e8e8">{{translate('版本')}}</span>
		</li>
		{% for room in classrooms_uku %}
		<li id="{{ room.id }}">
			<span class="cell">
				<span class="text">{{ room.name }}</span>
				{% if current_user.is_admin %}
				<span class="glyphicon glyphicon-edit pull-right"></span>
				{% endif %}
			</span>
			<span class="cell">{{ room.capacity }}</span>
			<span class="cell time">{{ room.created_at }}</span>
			<span class="cell" class="{{ room.system_version.type }}"
				style="float: none; border-right: 1px solid #e8e8e8">{{ room.system_version.value }}</span>
		</li>
		{% endfor %}
	</ul>
</div>
{% endif %}
{% endblock %}
{% block js %}
<script type="text/javascript">
	$('.glyphicon-edit').bind('click',function(){
		var $input=$('<input type="text" >'),
			$parent=$(this).parent();
		var old_name = $parent.find('.text').text();

		if($parent.find('input').length==0){
			$input.val($(this).prev().html());
			$parent.find('.text').remove();
			$parent.prepend($input);
			$input.focus();
		}

		// when input lost focus we send the request to server 
		$input.blur(function(){
			var name = $input.val();
			var $span = $('<span class="text"></span>');
			var room_id = $parent.parent().attr('id');

			if (name!=old_name){
				$.post('/school/classrooms/update_name', {'rid': room_id, 'name': name}, function(data){
					if (data['code'] == 0){
						$span.text(name);
					} 
					else {
						$span.text(old_name);
						alert(data['msg']);
					}
				}, 'json');
			} 
			else {
				$span.text(old_name);
			} // fi

			$parent.prepend($span);
			$input.remove();	
		});
	});

</script>
{% endblock %}
